<template>
    <div class="product-box">
        <div class="top-tips">
            <p>
                <b>首页》</b><span>全部分类>></span>
            </p>
            <button>筛选</button>
        </div>
        <!-- 商品列表详情展示区 -->
        <ul class="product-list-area">
            <li class="list-area-item" v-for="(item,index) in productlist">
                <!-- <a href="bijia.html?productId={{productId}}&category={{categoryId}}&"> -->
                    <div class="list-item-pic">
                        <!-- <img src="{{v.productImg.src}}" alt="{{v.productImg.alt}}"> -->
                    </div>
                    <div class="list-item-text">
                        <h4 class="item-title">
                            {{item.productName}}
                        </h4>
                        <p class="item-price">{{item.productPrice}}</p>
                        <p class="item-thumbs">
                            <span>{{item.productQuote}}</span>
                            <span class="thumbs-number">{{item.productCom}}</span>
                        </p>
                    </div>
                <!-- </a> -->
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
    export default{
        name:"Productlist",
        data(){
            return{
                productlist:[],
                pageid:"",
                categoryid:"",
                category:''
            }
        },
        created(){
            this.pageid=this.$route.query.pageid;
            this.categoryid=this.$route.query.categoryid;
            this.category=this.$route.query.category;
        },
        mounted(){
            this.getproductlist();
        },
        methods:{
            getproductlist(){
                axios({
                    url:'http://localhost:3000/api/getproductlist?',
                    params:{
                        pageid:this.pageid,
                        categoryid:this.categoryid,
                        category:this.category
                    },
                    method:"get"
                }).then(res=>{
                    console.log(res);
                    this.productlist=res.data.result.list;
                })
            }
        }
    }
</script>
<style scoped>
    .product-box{
        width: 100%;
    }
    .top-tips {
  width: 100%;
  height: 40px;
  background: #ddd7d7;
  display: flex;
}
.top-tips p {
  flex: 4;
  line-height: 40px;
  font-size: 16px;
}
.top-tips button {
  flex: 1;
  background-color: #d0d0d0;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d7d7d7), to(#f5f5f5));
  box-shadow: 0 1px 2px #888;
  border-radius: 5px;
  font-size: 14px;
  line-height: 28px;
  border: none;
  padding: 0 16px;
  margin-top: 4px;
}
</style>